<template>
	<view class="page ">
		<view class="wraper">
			<wd-card  v-for="item in list" v-if="list.length > 0 " :key="item.id">
				<template #title>
					<view class="flex " style="justify-content: space-between;">
						<view>{{item.name}}</view>
						<view class="title-tip">
							{{item.mobile}}
						</view>
					</view>
				</template>
				<view  class="content">
					<view style="color: #666; font-size: 12px;">
						{{`${item.provinceName}-${item.cityName}-${item.regionName}`}}</view>
				</view>

				<template #footer>
					<view class="flex " style="justify-content: space-between; padding: 10rpx 0;">
						<view class="" style="margin-right: auto;" >
							<wd-button size="small" type="success" v-if="choose" plain @click="chooseFun(item)">选择</wd-button>
						</view>
						<view class="">
							<wd-button size="small" style="margin-right: 8px;" @click="edit(item)">编辑</wd-button>
							<wd-button size="small" plain type="error" @click="handleDelete(item)">删除</wd-button>
						</view>
					</view>
				</template>
			</wd-card>
		</view>
    <view class="empty" v-if="list.length == 0">
      <wd-status-tip image="content" tip="暂无地址信息" />
    </view>
		<view class="footer pxp">
			<wd-button block @click="addressAdd">添加</wd-button>
		</view>

		<wd-message-box />
		<wd-notify />
	</view>
</template>

<script setup>
	import userApi from "@/api/user.js"
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import { useMessage, useNotify } from '@/uni_modules/wot-design-uni'

	const {
		showNotify,
		closeNotify
	} = useNotify()
	const message = useMessage()
	const list = ref([])
	const choose = ref(false)
	const init = () => {
		userApi.getAddressList().then(res => {
			list.value = res.list
		})
	}


	onLoad((e) =>{
		if(e.choose){
			choose.value = true
		}
	})

	onShow(()=>{
		init()
	})

	const addressAdd = () =>{
		uni.navigateTo({
			url: "/pages/user/address_add"
		})
	}

	const edit = (item) =>{
		const info = JSON.stringify(item)
		uni.navigateTo({
			url: "/pages/user/address_add?info="+info
		})
	}

	const handleDelete = (item) =>{
		  message
		    .confirm({
		      msg: '确定删除吗？',
		      title: '删除'
		    })
		    .then(() => {
				userApi.addressSave({
					addressId: item.id,
					status: "D"
				}).then(res =>{
					if(res){
						init()
						showNotify({
							type : "success",
							message : "操作成功"
						})
					}
				})
		    })
	}

	const chooseFun = (item) =>{
		userApi.addressSaveFun({
			addressId: item.id,
			isDefault: "Y"
		}).then(res =>{
			uni.navigateBack()
		})
	}
</script>

<style lang="scss" scoped>
	.content,
	.title {
	  display: flex;
	  flex-direction: row;
	  justify-content: flex-start;
	  align-items: center;
	}
  .empty {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
	.content {
	  justify-content: flex-start;
	}
	.title {
	  justify-content: space-between;
	}
	.title-tip {
	  color: rgba(0, 0, 0, 0.25);
	  font-size: 12px;
	}

	.footer{
		height: 120rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
	}

	//.wraper {
	//	height: calc(100vh - var(--window-top) - var(--status-bar-height) - 120rpx);
	//	// padding-top: 20rpx;
	//}
</style>
